<template>
<div>
<el-breadcrumb separator="/">
  <el-breadcrumb-item >首页</el-breadcrumb-item>
  <el-breadcrumb-item :to="{ path: '/index/user/add' }">用户新增</el-breadcrumb-item>
</el-breadcrumb>


<el-row class="margintop20">
<el-col :span="9">
 <el-form 
            :model="form" 
            :rules="rules"
            ref="myform" 
            label-width="100px" 
            class="myform">
            <el-form-item label="姓名" prop="username">
                <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="身份" prop="roleid">
               <el-select v-model="form.roleid">
                 <el-option v-for="(role,i) in roleList" 
                 :key="i"
                 :label="role.label"
                 :value="role.value"
                 ></el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="手机号码" prop="mobile">
                <el-input v-model="form.mobile"></el-input>
            </el-form-item>
            <el-form-item label="登录密码" prop="password">
                <el-input  type="password" show-password v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="width100"  @click="addForm">添加</el-button>
                <el-button type="danger" class="width100"  @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
</el-col>
</el-row>
</div>
</template>

<script>
import {roleList} from "@/utils"
import {getadduser} from "@/api"
export default {
  data(){
    return{
      form:{
        username:"",
        password:"abc111",
     },
      roleList,
       rules:{   // 表单校验 
                mobile:[
                    {required:true,message:"请输入手机号码",trigger:'blur'},
                    {
                        validator:(rule, value, callback)=>{
                            var mobileReg = /^1(3|5|6|7|8|9)\d{9}$/
                            if(mobileReg.test(value)){
                                callback()
                            }else{
                                callback(new Error("请输入正确的手机号码"));
                            }
                        },
                        trigger:'change'
                    }
                ],
                password:[
                    {required:true,message:"请输入登录密码",trigger:'blur'},
                    {
                        validator:(rule, value, callback)=>{
                            var passReg = /^[A-Za-z0-9]{4,12}$/
                            if(value.length<4){
                                callback(new Error("密码长度至少4位"));
                            }else if(value.length>12){
                                callback(new Error("密码长度最多12位"));
                            }else if(!passReg.test(value)){
                                callback(new Error("请输入正确的密码"));
                                
                            }else{
                                 callback()
                            }
                        },
                        trigger:'change'
                    }
                ],
                roleid:[
                  {required:true,message:"请输入身份",trigger:'change'},
                ],
                 username:[
                  {required:true,message:"请输入姓名",trigger:'blur'},
                ],

      }
    }
    
  },
  methods:{
    //重置
    resetForm(){
       this.$refs.myform.resetFields()
    },
    //新增
    addForm(){
     this.$refs.myform.validate(valid=>{
       if(valid){
        getadduser(this.form)
        .then(res=>{
          if(res.type){
            this.$router.push({name:"userlist"})  //添加成功之後跳轉到用戶列表頁。
          }
        })
       }else{
        return false
       }
     })
    }
  }
}
</script>